import React, { Component } from 'react';
import { Layout, Icon, Input,Button } from 'antd';
import {observer} from 'mobx-react';
import './styles.less';
import logo from '../assets/logo.svg';
import Menus from '../components/menus/menus';
import model from './model';
import history from '../utils/history';
import routerConf from '../conf/routerConf';
import em from '../utils/eventemitter';
import emKeys from '../conf/eventemitterKeys';
import publicModel from '../publicModel/publicModel';
const { Header, Sider, Content } = Layout;
const Search = Input.Search;
@observer
class MainLayout extends Component {

  changeRoute = (key) => {
    em.emit(emKeys.changeRoute, key);
    model.setTitle(routerConf[key].title);
    history.push(routerConf[key].path);
  }

  toggle = () => {
    model.setCollapsed(!model.collapsed);
  }
  render() {
    return (
      <div className="container">
        <Layout style={{width:'100%',height:'100%'}}>
          <Sider
            trigger={null}
            collapsible
            collapsed={model.collapsed}
          >
              <div className="side-header">
                <div className="logo">
                  <img src={logo} alt="logo" className="logo-img"/>
                </div>
                <span className="title" className={model.collapsed?'title-hidden':'title-show'}>时代云</span>
              </div>
              <Menus selectedKeys={publicModel.currentMenus} collapsed={model.collapsed} onSelect={(item, key, selectedKeys)=>{
                this.changeRoute(item.key);
              }}/>
          </Sider>
          <Layout>
            <Header className="header">
              <div className="header-left">
                <Icon
                  className="trigger"
                  type={model.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle}
                />
                <span className="content-title">{publicModel.title}</span>
              </div>
              <div className="header-right">
                <div className="user">
                  <Icon type="user" width="100%" height="100%" style={{fontSize:30}}/>
                </div>
            </div>
            </Header>
            <Content style={{
              margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,width:'100%',height:'100%'
            }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </div>
      
    );
  }
}

export default MainLayout;
